<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
	"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<title>Properties palette basic tests (part 4)</title>

	<!-- CUSTOMIZATION: Make sure "../" URLs for href/src attributes are correct -->
	<link rel="stylesheet" type="text/css" href="../css/testplan.css" />
</head>

<body>
	<div class="navbar">
		<a href="./" title="show directory contents"><code>./</code> (show contents of this directory)</a>
		&nbsp;&nbsp;&nbsp;&nbsp;
		<a href="../" title="show directory contents"><code>../</code> (show contents of parent directory)</a>
	</div>
	<hr />
	<h1 class="test_title">Properties palette basic tests (part 4)</h1>

	<h2 class="test_section">CSS cascade features</h2>
	<h3 class="steps_subsection">Steps</h3>
	<ol class="steps">
		<li>Create a virgin user environment navigating away from Maqetta, clearing browser cache,
			killing the server, removing users/ folder, restarting the server, and navigating browser
			back to Maqetta. (For server-hosted, create a new user)</li>
		<li>Clone the "claro" theme into a new theme using the "New Theme" command. For example, create theme "mytheme".</li>
		<li>Issue a "New HTML File" command.</li>
		<li>Drag a Button onto canvas.</li>
		<li>Go to Properties palette and go to 'width' property.
			Click on the right-pointing icon at the right side of the 'width'
			property to show the CSS cascade.
			<blockquote>You should see a list of CSS selectors, 
			at least one of which should include within it ".claro .dijitButtonNode".
			You should not see an "element.style" entry.</blockquote>
			Up above in the type-in area of the 'width' property, type "200px", then press Enter to try to commit the value.
			<blockquote>This operation if completed would modify one of the CSS rules in the (read-only) Claro theme.
			Any rules that would modify a read-only theme should be disabled. 
			</blockquote>
			If you see the "about to change a global CSS rule, are you sure", click "Cancel".<br /><br /></li>
		<li>Click on the Switch themes icon on the toolbar, and change to your new theme ("mytheme").</li>
		<li>Go again to Properties palette and go to 'width' property and the CSS cascade view for that property.
			Up above in the type-in area of the 'width' property, type "200px", then press Enter to try to commit the value.
			You should see an "about to change a global CSS rule, are you sure". 
			<blockquote>This operation attempts to change one of the style rules within one of the CSS files
			for your new "mytheme" theme.
			</blockquote>
			Click "OK" to make
			a global change such that all Buttons will have width 200px. The currently selected button
			should now be 200px wide.<br /><br /></li>
		<li>Drag another Button onto the canvas. It should be 200px wide also.</li>
		<li>Click on the Switch themes icon on the toolbar, and change back to ("claro").
			<blockquote>The buttons should revert back to their default size.
			</blockquote>
		</li>
		<li>Click on the Switch themes icon on the toolbar, and change back to ("mytheme").
			<blockquote>The buttons should be 200px wide again.
			</blockquote>
		</li>
		<li>Click on the "Save" icon on the main toolbar to save the new file. <span style="color:red">The asterisks that indicates that the file is "dirty" should go away.</span></li>
		<li>Click on the "X" close button for the editor tab for this file</li>
		<li>In the Files palette, double-click on the file you just created to re-open the file.</li>
	</ol>
	<h3 class="expectedResults_subsection">Expected results</h3>
	<ol class="expectedResults">
		<li>See text above for expected results.</li>
	</ol>

	<h2 class="test_section">app.css files</h2>
	<h3 class="steps_subsection">Steps</h3>
	<ol class="steps">
		<li>Create a virgin user environment navigating away from Maqetta, clearing browser cache,
			killing the server, removing users/ folder, restarting the server, and navigating browser
			back to Maqetta. (For server-hosted, create a new user)</li>
		<li>Double-click on the app.css file in the Files palette.</li>
		<li>Add the following lines to the bottom of the file:
			<pre>
#myapp.claro .class1.dijitButton .dijitButtonNode {
	width:200px;
}
#label1 {
	font-size:30px;
}
			</pre>
		</li>
		<li>Save and close the file.</li>
		<li>Issue a "New HTML File" command.</li>
		<li>Drag two Buttons and two LABELs onto canvas.</li>
		<li>Select the second Button, go to Properties palette and set class to 'class1'.</li>
		<li>Select the second LABEL, go to Properties palette and set id to 'label1'.</li>
		<li>Click on the "Save" icon on the main toolbar to save the new file. <span style="color:red">The asterisks that indicates that the file is "dirty" should go away.</span></li>
		<li>Click on the "X" close button for the editor tab for this file</li>
		<li>In the Files palette, double-click on the file you just created to re-open the file.</li>
	</ol>
	<h3 class="expectedResults_subsection">Expected results</h3>
	<ol class="expectedResults">
		<li>Second button should have width of 200px and second LABEL should have font size of 30px.</li>
	</ol>

</body>
</html>
